<template>
    <div>
      <!-- 登陆后 -->
      <div class="page">
      <!-- 头部 -->
      <div class="header"><SysHeader></SysHeader></div>
      <!-- 侧边导航栏 -->
      <div class="slider"><SysSlider/></div>
      <!-- 对应内容区 -->
      <div class="content">
        <!-- 面包屑 -->
        <div class="bread"><SysBread></SysBread></div>
        <!-- 路由展示区 -->
        <div class="showPlace">
          <router-view></router-view>
        </div>
      </div>
    </div>
    </div>
    
  </template>
  
  <script>
  import SysHeader from '../SysHeader'
  import SysSlider from '../SysSlider'
  import SysBread from '../SysBread'
  export default {
    name: 'App',
    components: {
      SysHeader,
      SysSlider,
      SysBread,
    },
  }
  </script>
  
  <style lang="less" scoped>
    .slider{
      position: absolute;
      left: 0.5rem;
      bottom: 0.5rem;
      width: 13rem;
      top: 3.5rem;
      background-color: #545c64;
    }
    .content{
      position: absolute;
      left: 13.5rem;
      bottom: 0.5rem;
      right: .5rem;
      top: 3.5rem;
      // background-color: black;
      .bread{
        // background-color: pink;
        padding:1rem;
        font-size:1rem;
        color:rgb(46, 45, 45)
      }
      .showPlace{
        box-sizing: border-box;
        // background-color: skyblue;
        padding: 1rem 3rem 3rem;
        height: 29.87rem;
      }
    }
  </style>